<template>
   <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item,index) in list" :key="item.id">
        <div class="view">
          <span class="index">{{index+1}}</span> <label>{{item.name}}</label>
          <button @click=del(item.id) class="destroy"></button>
        </div>
      </li>
      
    </ul>
  </section>
</template>

<script>
export default {
props:{
  list:{
    type:Array,
    require:true
  }
},
methods:{
  del(id){
    this.$emit('delList',id)
  }
}
}
</script>

<style>

</style>